<template>
	<view class="wrap">
		<view class="eat_body">
			<view class="eat_head">
				<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734166728444775.png" mode="aspectFill"></image>
				<view class="head_name">
					恭喜您获得吃货称号
				</view>
				<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17341667398211408.png" mode="aspectFill"></image>
			</view>
			<view class="eat_icon">
				<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1734166984015912.png" mode="aspectFill"></image>
			</view>
			<view class="eat_title">
				当前成功解锁了
				<text>5</text>
				种美食
			</view>
			<view class="eat_lit">
				已解锁80种美食，获得“高级吃货”称号
			</view>
			<view class="btn_body">
				<!-- <view class="btn_cell">
					返回
				</view> -->
				<view class="btn_cell btn_next">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff5e9;
}
.wrap{
	padding: 24rpx;
	.eat_body{
		padding: 72rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		.eat_head{
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 48rpx;
				height: 32rpx;
			}
			.head_name{
				margin: 0 8rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #641E0C;
			}
		}
		.eat_icon{
			width: 100%;
			height: 702rpx;
			margin: 0 auto;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.eat_title{
			font-size: 32rpx;
			color: #641E0C;
			text-align: center;
			position: relative;
			z-index: 9;
			&::after{
				content: '';
				position: absolute;
				bottom: -2rpx;
				left: 50%;
				transform: translate(-50%,0);
				width: 65%;
				height: 12rpx;
				background: #FFC9B8;	
				border-radius: 8rpx;
				z-index: -1;
			}
			text{
				font-weight: bold;
				font-size: 48rpx;
				color: #FF6030;
				padding: 0 6rpx;
			}
		}
		.eat_lit{
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #641E0C;
		}
		.btn_body{
			margin-top: 118rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn_cell{
				flex: 1;
				text-align: center;
				border-radius: 44rpx;
				border: 2rpx solid #FF6030;
				padding: 22rpx 96rpx;
				color: #FF6030;
				font-size: 32rpx;
			}
			.btn_next{
				background-color: #FF6030;
				color: #FFFFFF;
			}
		}
	}
}
</style>
